<template>
    <div>
        <h3>房型修改</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房型名称</td>
                    <td>
                        <input type="text" v-model="quertInfo.HouseTypeName"> 
                    </td>
                </tr>
            
                <tr>
                    <td align="right">图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="quertInfo.Photo" width="100" height="100" v-if="quertInfo.Photo!=''">
                    </td>
                </tr>
            
                <tr>
                    <td align="right">房型面积</td>
                    <td>
                        <input type="text" v-model="quertInfo.Area">
                    </td>
                </tr>
                <tr>
                    <td align="right">是否有窗</td>
                    <td>
                        <input type="radio" name="IsWindow" :value="0" v-model="quertInfo.IsWindow">有
                        <input type="radio" name="IsWindow" :value="1" v-model="quertInfo.IsWindow">无
                    </td>
                </tr>
                <tr>
                    <td align="right">入住人数</td>
                    <td>
                        <input type="text" v-model="quertInfo.Count">
                        
                    </td>
                </tr>

                <tr>
                    <td align="right">房型价格</td>
                    <td>
                        <input type="text" v-model="quertInfo.Price">
                    </td>
                </tr>
                <tr>
                    <td align="right">房型状态</td>
                    <td>
                        <input type="radio" name="State" :value="0" v-model="quertInfo.State">有人
                        <input type="radio" name="State" :value="1" v-model="quertInfo.State">无人
                    </td>
                </tr>
              
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 输入框:文本框 文本域 时间日期 直接双向绑定  -->
    <!-- 单选按钮 下拉框 复选按钮 先绑value 然后对 单选按纽选按钮再双向绑定 下拉框select双向绑定 -->






</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import moment from 'moment';

const router=useRouter();
const route=useRoute();

onMounted(()=>{
    getlist();
})

const getlist=()=>{
    axios({
        url:'/api/House/GetHouseType',
        method:'get',
        params:{
            id:route.query.id,
        }
    })
    .then(res=>{
        console.log(res);
        Object.assign(quertInfo,res.data);
    })
    .catch(err=>{
        console.log(err);
    })
}

const quertInfo=reactive({
    "Id": route.query.id,
  "HouseTypeName": "",
  "Photo": "",
  "Area": '',
  "IsWindow": '',
  "Count": '',
  "Price": '',
  "State": '',

})
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new  FormData();
    f.append('file',obj);
    axios({
        url:'/api/Imgs/UpdateImg',
        method:'post',
        data:f,
    })
    .then(res=>{
        console.log(res);
        quertInfo.Photo=res.data;
        if(res.data=="不是图片"){
            alert("上传的不是图片");
            return;
        }
        if(res.data=="大于2M"){
            alert("上传的图片大于2M");
            return;
        }
    })
    .catch(err=>{
        console.log(err)
    })
}

const ok=()=>{

    //2-20个汉字  /^[\u4e00-\u9fa5]{2,20}$/
    //手机号    /^1[3-9]\d{9}$/
    //正整数    /^[1-9]\d*$/
    //正小数    /^[1-9]\d*(\.\d*)?$/

    if(quertInfo.HouseTypeName==""){
        alert("房型名称不能为空");
        return;
    }
    let reg=/^[\u4e00-\u9fa5]{2,20}$/;
    if(reg.test(quertInfo.HouseTypeName)==false){
        alert("名称只能是2-20个汉字");
        return;
    }

    axios({
        method:'put',
        url:'/api/House/HouseUpd',
        data:quertInfo,
    })
    .then(res=>{
        console.log(res);
       
        if(res.data>0){
            alert("修改成功")
        }
        else{
            alert("修改失败");
        }
    })
    .catch(err=>{
        console.log(err);

    })
}


</script>

<style scoped>

</style>